<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓库WMS</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="../../res/js/comm.js"></script>
    <link href="../../res../res/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <script src="../../js/wms/select.js"></script>
    <script src="../../res/js/ajaxUtil.js"></script>
</head>

<body class="gray-bg">

    <style> .select2-container--open { z-index: 10000000000}  </style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="panel panel-info">
            <div class="panel-heading"><i class="fa fa-info-circle"></i> 仓库列表</div>
            <div class="panel-body">
                <!--查询条件-->
                <div class="ibox-query">
                    <form id="wmsForm" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">仓库编码</label>
                            <div class="col-sm-2"><input id="warehouseCode" name="warehouseCode" class="form-control" type="text"> </div>

                            <label class="col-sm-1 control-label">仓库名称</label>
                            <div class="col-sm-2"> <input id="warehouseName" name="warehouseName" class="form-control" type="text"></div>

                            <div><button style="margin-left: 100px;" class="btn btn-info" onclick='$.openx.query()' type="button"><i class="glyphicon glyphicon-search"></i> 查询  </button></div>
                        </div>
                        <div class="hr-line-dashed"></div>
                    </form>
                </div>
                <!--主体部分-->
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!--工具栏-->
                        <div class="bars pull-left">
                            <button class="btn btn-warning" onclick="$.openx.insert()" type="button"><i class="glyphicon glyphicon-plus"></i> 新增 </button>
                        </div>
                        <!--表格部分-->
                        <table id="table">
                            <thead>
                                <tr>
                                    <th data-align="center" data-field="_checkbox_status" data-checkbox="true"></th>
                                    <th data-align="center" visible="false" data-field="id" data-formatter="$.openx.generatorId"> 序号 </th>
                                    <th data-align="center" data-field="warehouseCode" data-formatter="warehouseCodeFormatter">仓库编码</th>
                                    <th data-align="center" data-field="name">仓库名称</th>
                                    <th data-align="center" data-field="address">仓库地址</th>
                                    <th data-align="center" data-field="phone">联系人电话</th>
                                    <th data-align="center" data-field="status" data-formatter="warehouseStatusFormatter">仓库状态</th>
                                    <th data-align="center" data-field="remark">仓库描述</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>



<script type="text/html" id="wmsDialog">
    <form class="form-horizontal" id="wmsPartnerForm">
        <div class="col-md-12" style="width: 800px;margin-top:10px">

            <div class="form-group" >
                <label class="col-sm-4 control-label"><font color="red" >* </font>仓库编码：</label>
                <div class="col-sm-8">
                    <input name="warehouseCode" id="warehouseCodeInsert" class="form-control" placeholder="请输入仓库编码" type="text" title="必填字段" required="true" value="{{!d.warehouseCode ? '':d.warehouseCode}}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label"><font color="red" >* </font>仓库名称：</label>
                <div class="col-sm-8">
                    <input name="name" id="warehouseName" class="form-control" placeholder="请输入仓库名称" type="text"  title="必填字段" required="true" value="{{!d.name ? '':d.name}}">
                </div>
            </div>

            <div class="form-group" >
                <label class="col-md-4 control-label"><i class="snowflake"></i>所属城市：</label>
                <div class="col-sm-8" >
                    <select id="province" style="width: 150px;"><option value="">请选择省/直辖市</option> </select>
                    <select id="city" style="width: 150px; "><option value="">请选择市</option></select>
                    <select id="district" name = "district" style="width: 150px; "><option value="">请选择区/县</option></select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label">仓库地址：</label>
                <div class="col-sm-8">
                    <input name="address" id="wmsAddress" class="form-control" placeholder="请输入仓库地址"  type="text" value="{{!d.address ? '':d.address}}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label">联系人电话：</label>
                <div class="col-sm-8">
                    <input name="phone" id="wmsPhone" class="form-control" placeholder="请输入联系人电话" type="text" value="{{!d.phone ? '':d.phone}}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">仓库状态：</label>
                <div class="col-sm-8">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="status" id="statusRadio1"  value="OPEN" checked="{{d.status == 'OPEN' ? true : false}}" />
                        <label for="statusRadio1"> 营业 </label>
                    </div>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="status" id="statusRadio2"  value="CLOSE" {checked="{{d.status == 'CLOSE' ? true : false}}" />
                        <label for="statusRadio2"> 停业 </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">仓库描述：</label>
                <div class="col-sm-8">
                    <input name="remark" class="form-control" placeholder="请输入仓库描述" type="text" value="{{!d.remark ? '':d.remark}}">
                </div>
            </div>
        </div>


        <div class="col-md-12" style="margin-top:10px">
        <div class="fixed-table-container" style="padding-bottom: 0px;">
            <div class="fixed-table-header" style="display: none;"><table></table></div>
            <div class="fixed-table-body">
                <table id="table1" class="table table-hover table-striped">
                    <thead>
                    <tr data-index="0">
                        <th style="text-align: center; " tabindex="0" ><div class="th-inner "> 门店仓编码</div><div class="fht-cell"></div></th>
                        <th style="text-align: center; " data-field="warehouseCode" tabindex="0"><div class="th-inner ">门店仓库存比例</div><div class="fht-cell"></div></th>
                        <th style="text-align: center; " data-field="goodsCode" tabindex="0"><div class="th-inner ">大仓编码</div><div class="fht-cell"></div></th>
                        <th style="text-align: center; " data-field="stock" tabindex="0">   <div class="th-inner ">大仓库存比例</div>   <div class="fht-cell"></div> </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="text"  style="width: 100%"></td>
                        <td><input type="text"  style="width: 100%"></td>
                        <td><input type="text"  style="width: 100%"></td>
                        <td><input type="text"  style="width: 100%"></td>
                        <td>
                            <button type="button" class="btn btn-outline btn-success btn-xs" onclick="addRowsData(this,this.parentNode.parentNode)">添加</button>
                            <button type="button" class="btn btn-outline btn-default btn-xs" onclick="deleteRowsData('table1',this.parentNode.parentNode)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="fixed-table-footer" style="display: none;">
                <table>
                    <tbody>
                    <tr></tr>
                    </tbody>
                </table>
            </div>
        </div>
        </div>

    </form>
</script>


<!--查看虚拟仓详情-->
<script type="text/html" id="virtualDetailTpl">
    <div style="padding: 10px">
        <table class="layui-table" style="text-align: center;margin: 0px">
            <thead>
            <tr>
                <th style="text-align: center">虚拟仓编码</th>
                <th style="text-align: center">实体仓编码</th>
                <th style="text-align: center">仓库类型</th>
                <th style="text-align: center">库存比例</th>
            </tr>
            </thead>
            <tbody>
            {{#  layui.each(d.details, function(index, item){ }}
            <tr>
                <td>{{ item.virtualWarehouseCode }}</td>
                <td>{{item.physicalWarehouseCode}}</td>
                <td>{{item.physicalWarehouseType==='SHOP' ? "门店仓":"大仓" }}</td>
                <td>{{item.rate}}</td>
            </tr>
            {{# }); }}
            </tbody>
        </table>
    </div>
</script>



<script>
    let formId = 'wmsForm', url = "/openx/wms/virtual/listVirtualWarehouse";
    let indexItem = 0;
    (function () {
        var data = $.openx.getJsonObj(formId);
        $.openx.initTable("table", url, data);
    })();



    function showVirtualkDetail(row) {
            console.log(row.details)
            laytpl($.openx.innerHtml('virtualDetailTpl')).render(row, function (html) {
                $.openx.openLayer(null, '虚拟仓详情', html, true);
            });
        }



    function warehouseStatusFormatter(value, row) {
        if (value === 'CLOSE') {
            return '<font color="red">停业</font>'
        } else if (value === 'OPEN') {
            return '<font color="green">营业</font>'
        }
        return '';
    }
    //校验新建虚拟仓数据
    function checkVirtual(array) {
        if(array.length > 5){
            layer.msg("虚拟仓组合最多5");
            return false;
        }
        let pass = true;
        array.forEach(item =>{
            if(!pass){
                return;
            }
            let virtualMain = item.virtualMain;
            let virtualShop = item.virtualShop;
            if(!virtualShop.physicalWarehouseCode){
                layer.msg("门店仓编码为空");
                pass = false;
                return;
            }
            if(!virtualShop.rate){
                layer.msg("门店仓库存比例为空");
                pass = false;
                return;
            }
            let re = /^\+?[1-9]\d*$/;
            if (!re.test(virtualShop.rate)) {
                layer.msg("门店仓库存比例不是正整数");
                pass = false;
                return;
            }
            item.virtualShop.rate = parseInt(virtualShop.rate);
            if(item.virtualShop.rate > 100){
                layer.msg("门店仓库存比例大于100");
                pass = false;
                return;
            }
            if(virtualMain.physicalWarehouseCode && !virtualMain.rate){
                layer.msg("大仓仓库存比例为空");
                pass = false;
                return;
            }

            if (virtualMain.rate && !(re.test(virtualMain.rate))) {
                layer.msg("大仓库存比例比例不是正整数");
                pass = false;
                return;
            }
            if(virtualMain.rate){
                item.virtualMain.rate = parseInt(virtualMain.rate);
            }

            if(item.virtualMain.rate && item.virtualMain.rate > 100){
                layer.msg("大仓库存比例大于100");
                pass = false;
            }
        });
        return pass;
    }

    $.openx.insert = function () {
            rowindex = 1;
            let createForm = "wmsPartnerForm";
            let innerHtml = $.openx.innerHtml('wmsDialog');
            laytpl(innerHtml).render({}, function (html) {
                $.openx.openLayer(['1000', '750'], '新增虚拟仓库', html, false, function () {
                    if ($.openx.validation(createForm)) {
                        let bean = $.openx.getJsonObj(createForm);
                        bean.regionCode = getDistrictCode("district");
                        let array = getTableData('table1');
                        if(this.checkVirtual(array)){
                            let postVirtualArray = [];
                            array.forEach(item =>{
                                let virtualMain = item.virtualMain;
                                let virtualShop = item.virtualShop;
                                if(virtualShop.physicalWarehouseCode){
                                    postVirtualArray.push(virtualShop);
                                }
                                if(virtualMain.physicalWarehouseCode){
                                    postVirtualArray.push(virtualMain);
                                }
                            });
                            bean.rates = postVirtualArray;
                            console.log('bean', bean);
                            $X("/wms/virtual", "createVirtualWarehouse").callx({
                                bean: bean,
                                onResult: function (data) {
                                    if (data) {
                                        layer.msg("新增成功");
                                    }
                                    layer.closeAll();
                                    $.openx.tableRefresh(null, null, true);
                                },
                                onError: function (error) {
                                    console.log(error)
                                }
                            });

                            let resultNum = setInterval(function () {
                                indexItem ++;
                                if (indexItem === 10) {
                                    window.clearInterval(resultNum)
                                }
                                $.openx.tableRefresh(null, null, true);
                                console.log("刷新："+ indexItem +"次")
                                layer.closeAll();
                            }, 1000*15);
                            layer.msg("此过程需要1-3分钟,请稍等。15将秒刷新一次页面。", { time: 5000, icon: 5 });
                        }
                    }
                });
            });
            initAreaSelect("province", "city", "district");
        }

        $.openx.query = function () {
            var data = $.openx.getJsonObj(formId);
            $.openx.tableRefresh(url, data);
        };

        function warehouseCodeFormatter(value, row) {
             return "<a href=\'javascript:void(0)\' title='\点击查看订单详情\' style = '\color:#000000;text-decoration:underline;\' onclick =\'javascript:showVirtualkDetail(" + JSON.stringify(row) + ")\'><b>" + row.warehouseCode + "</b><a>";
        }
    //确认列数据
    let rowindex = 1;
    function addRowsData(curr, tr) {
        rowindex = parseInt($(tr).attr("data-index")) + rowindex;
        let cloneTr = $(tr).clone(true);
        let newRow = "<tr data-index=" + rowindex + ">" + cloneTr.html() + "</tr>";
        $(tr).after(newRow);
        let deleteButton = $(tr).next().find("td").eq(4).find("button").eq(1);
        deleteButton.removeAttr("disabled");
        deleteButton.attr("class", "btn btn-outline btn-danger btn-xs")
    }
    //删除列数据
    function deleteRowsData(id, tr) {
        let array = getTableData(id);
        if (array.length <= 1) {
            layer.msg("至少保留一个虚拟仓");
            return;
        }
        $(tr).remove();
    }
    function getTableData(id) {
        let arrays = [];
        $("#"+id).find("tbody").find("tr").each(function (i, item) {
            let uuid = Math.uuid(15);
            let virtual = {
                virtualShop: {groupCode :uuid, physicalWarehouseType: "SHOP"},
                virtualMain: {groupCode :uuid, physicalWarehouseType: "MAIN"}
            };
            $(item).find("td").each(function (index, obj) {
                let val = $(obj).find("input[type='text']").val();
                if(index === 0){
                    virtual.virtualShop.physicalWarehouseCode = val;
                }
                if(index === 1){
                    virtual.virtualShop.rate = val;
                }
                if(index === 2){
                    virtual.virtualMain.physicalWarehouseCode = val;
                }
                if(index === 3){
                    virtual.virtualMain.rate = val;
                }
            });
            arrays.push(virtual);
        });
        console.log('arrays',arrays);
        return arrays;
    }
    </script>


</html>
